<template>
    <div class="app-container">
        <levelbar></levelbar>
        <div class="chart-sales">
            <div class="sales-title">
                <span class="tip"></span>
                <span>近30天销售趋势</span>
            </div>
            <div class='chart-trend'>
                <monthChart height='100%' width='100%'/>
            </div>
        </div>
        <div class="chart-sales switch-time">
            <span class="label-time">切换日期</span>
            <el-date-picker :picker-options="pickerOptions0" :editable="false" :clearable="false" v-model="date" type="month" placeholder="请选择">
            </el-date-picker>
            <!-- <el-button type="primary" class="btn-switch" @click="btnMonth">切换</el-button> -->
        </div>
        <div class="total-sales" v-loading = "monthMarketLoading">
            <div class="sales-title">
                <span class="tip"></span>
                <span class="current-time" v-cloak>{{dateBtn | formatMonth}}月</span>
                <span>销售总额</span>
            </div>
            <div class="current-month">
                <div class="current-item">
                    <div class="title">当月订单量（条）</div>
                    <div class="data" v-cloak>{{!monthMarket.totalnum ? '--' : monthMarket.totalnum}}</div> 
                </div>
                <div class="current-item">
                    <div class="title">当月销售总额（元）</div>
                    <div class="data" v-cloak>{{!monthMarket.totalmoney ? '--' : monthMarket.totalmoney.toFixed(2)}}</div> 
                </div>
                <div class="current-item">
                    <div class="title">账户余额（元）</div>
                    <div class="data" v-cloak>{{!sMoney ? '--' : sMoney.toFixed(2)}}</div> 
                </div>
            </div>
        </div>
        <div class="table-list">
            <div class="sales-title">
                <span class="tip"></span>
                <span>{{dateBtn | formatMonth}}月 销售详细</span>
            </div>
            <TableLayoutes form-title="">  
                <el-table :data="tableData"  style="width: 100%" v-loading='loading'>                     
                    <el-table-column prop="incrementName" label="商品名称"></el-table-column>
                    <el-table-column label="月订单量（条）">
                        <template scope="scope">
                            {{!scope.row.totalnum ? '--' : scope.row.totalnum}}
                        </template>
                    </el-table-column>
                    <el-table-column label="月销售额（元）">
                        <template scope="scope">
                            {{!scope.row.totalmoney ? '--' : scope.row.totalmoney.toFixed(2)}}
                        </template>
                    </el-table-column>
                </el-table>
            </TableLayoutes>
        </div>
    </div>
</template>

<script>
import Levelbar from '../../layout/Levelbar';
import monthChart from './monthChart';
import TableLayoutes from 'components/TableLayoutes';
import {
  getOrderStatisticUp,
  getAgentAccountInfo,
  listOrderStatisticUp
} from 'api/serviceManage';
export default {
    name: 'orderStatistics',
    components: { Levelbar, monthChart, TableLayoutes },
    data() {
        return {
            pickerOptions0: {
                disabledDate(time) {
                    return time.getTime() > Date.now() - 8.64e7;
                }
            },
            loading: false,
            monthMarketLoading: false,
            date: new Date(), // 时间
            dateBtn: new Date(),
            tableData: [], // 30天销售详细

      // 销售总额集合
            monthMarket: {},
            sMoney: ''
        };
    },
    created() {
        this.getTableData(this.date);
        this.getAccount();
        this.getStatisticUp(this.date);
    },
    watch: {
        date(val, old) {
            if (val) {
                this.getTableData(this.date);
                this.getStatisticUp(this.date);
                this.getAccount();
                this.dateBtn = this.date
            }
        }
    },
    methods: {
        getTableData(val) {
            this.monthMarketLoading = true;
            getOrderStatisticUp(this.filterDate(val)).then(data => {
                this.monthMarketLoading = false;
                if (data.data.content) {
                    this.monthMarket = data.data.content;
                }
            }).catch(Error => {
                this.$message.error(Error)
                this.loading = false;
            })
        },
        // btnMonth() {
        //     this.getTableData(this.date);
        //     this.getStatisticUp(this.date);
        //     this.getAccount();
        //     this.dateBtn = this.date
        // },
    // 返回年月  yyyy - mm
        filterDate(val) {
            if (val) {
                let month = val.getMonth() + 1 + '';
                return `${val.getFullYear()}-${month.length > 1 ? month : '0' + month}`;
            }
        },
        getAccount() {
            this.loading = true;
            getAgentAccountInfo().then(data => {
                this.loading = false;
                if (data.data.content) {
                    this.sMoney = data.data.content.sMoney;
                }
            }).catch(Error => {
                this.$message.error(Error)
                this.loading = false;
            })
        },
        getStatisticUp(val) {
            this.loading = true;
            listOrderStatisticUp(this.filterDate(val)).then(data => {
                this.loading = false;
                this.tableData = [];
                if (data.data.content) {
                    this.tableData = data.data.content;
                } else {
                    this.tableData = [];
                }
            }).catch(Error => {
                this.$message.error(Error)
                this.loading = false;
            })
        }
    }
};
</script>
<style lang="scss" scoped>
.app-container {
  position: relative;
  padding: 20px 20px 10px;
  $bgcolor: #fff;
  @mixin box-item() {
    overflow: hidden;
    background: $bgcolor;
    box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.1);
    -webkit-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.1);
    color: #333;
    font-size: 14px;
    padding: 20px 20px;
  }
  @mixin tip-css {
    display: inline-block;
    height: 12px;
    width: 6px;
    border-left: 3px solid #ff5e2c;
    padding-left: 15px;
  }
  .switch-time {
    @include box-item();
    .label-time {
      padding-right: 6px;
    }
    .btn-switch {
      float: right;
    }
  }
  .total-sales {
    @include box-item();
    
    margin-top: 15px;
    .sales-title {
      .tip {
        @include tip-css();
      }
      .current-time {
        padding-right: 8px;
      }
    }
    .current-month {
      display: flex;
      justify-content: space-between;
      padding: 20px;
      padding-top: 40px;
      .current-item {
        .title {
          font-size: 16px;
          color: #aaa;
          width: 50px;
          padding-bottom: 30px;
          width: 160px;
          text-align: center;
        }
        .data {
          font-size: 26px;
          color: #333;
          text-align: center;
          width: 160px;
        }
      }
    }
  }
  .chart-sales {
    @include box-item();
    margin-top: 15px;
    .sales-title {
      .tip {
        @include tip-css();
      }
    }
    .chart-trend {
      position: relative;
      width: 100%;
      height: 350px;
    }
  }
  .table-list {
    @include box-item();
    margin-top: 15px;
    .sales-title {
      .tip {
        @include tip-css();
      }
    }
  }
}
</style>                     